<template>
  <div class="center">
    <n-card :bordered="false" class="mt-4 proCard" size="small" :segmented="{ content: 'hard' }">
      <div class="formClass">
        <n-form
          :model="formValue"
          :size="size"
          ref="formRef"
          label-placement="left"
          label-align="left"
          :label-width="100"
        >
          <n-space justify="space-between">
            <n-h6 prefix="bar" type="success">{{menuName}}</n-h6>
          </n-space>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi
              v-for="(item, index) in ItemList"
              :key="index"
              :span="item.span"
              :label="`${item.label}:`"
            >
              <component
                :is="item.type"
                v-model:value="formValue[item.enName]"
                :options="item.options"
                :clearable="item.clearable"
                :check-strategy="item.checkStrategy"
                :checkable="item.checkable"
                :cascade="item.cascade"
                :multiple="item.multiple"
                :disabled="item.disabled"
                :placeholder="item.placeholder"
                :src="item.src"
                :size="item.size"
                :style="{ width: item.width }"
              >
              </component>
            </n-form-item-gi>
          </n-grid>
          <n-space style="justify-content: center;">
            <n-button type="primary" @click="preservation">保存</n-button>
            <n-button @click="cancel">取消</n-button>
          </n-space>
        </n-form>
      </div>
    </n-card>
  </div>
</template>

<script>
import { defineComponent, ref,onActivated } from 'vue';
import { useMessage } from 'naive-ui';
import { NConfigProvider, NCascader, NInput, NDatePicker, NSpace } from 'naive-ui';
import { addMenu,updateMenu } from '@/api/menu/index';
import { fetchAuthListPage } from '@/api/Role/index'; //导入接口文件
import { useRoute,useRouter } from 'vue-router';
export default defineComponent({
  name:'addMenu',
  components: {
    NConfigProvider,
    NInput,
    NDatePicker,
    NSpace,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const formRef = ref(null);
    const message = useMessage();
    const type = ref(true);
    const menuName = ref(null)
    const ItemList = ref([
      {
        label: '菜单名称',
        type: 'N-input',
        enName: 'menuName',
        span: 24,
        clearable: true,
        disabled: false,
        size: 'small',
        placeholder:'请输入菜单名称'
      },
      {
        label: '路由名称',
        type: 'N-input',
        enName: 'url',
        span: 24,
        clearable: true,
        disabled: false,
        size: 'small',
        placeholder:'请输入路由路径'
      },
      {
        label: '菜单图标',
        type: 'N-input',
        enName: 'icon',
        span: 24,
        clearable: true,
        disabled: false,
        size: 'small',
        placeholder:'请输入菜单图标'
      },
    ]);
    const formValue = ref({});
    onActivated(() => {
      // jurisdiction();
      menuName.value = route.params.name
    });
    //获取权限列表
    // const jurisdiction = async () => {
    //     const data = await fetchAuthListPage();
    //     const options = data.list.map((res) => {
    //         return {
    //             label:res.authName,
    //             key:res.id
    //         }
    //     });
    //     ItemList.value.map((res) => {
    //         if(res.enName == 'authList'){
    //             res.options = options
    //         }
    //     })
    // }
    //保存
    const preservation = async () => {
        formValue.value = { ...formValue.value,...route.params}
        let data = await addMenu(formValue.value);
    }
    //取消
    const cancel = () => {
        router.push({ name: 'MenuManagement'});
    }
    return {
      formRef,
      preservation,
      cancel,
      // jurisdiction,
      size: ref('medium'),
      ItemList,
      formValue,
      menuName,
      type,
    };
  },
});
</script>
<style lang="less" scoped>
.center :deep .n-avatar {
  position: relative;
  bottom: 15px;
}
.formClass {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
